import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import { Drawer, Form, Button, Col, Row, Input, Select, DatePicker, Icon, message, Radio, Tabs, Collapse, } from 'antd';
import styles from './typeNode.less';
import Editor from '@/utils/Editor';
import AnswerSlot from './answerSlot';
const TabPane = Tabs.TabPane;
const { TextArea } = Input;
const { Panel } = Collapse;
class AnswerEdit extends React.Component {

    // state = {
    //     answer:{},
    //     index:0,
    // };

    componentDidMount() {
        this.props.onRef(this);
    }

    // componentWillReceiveProps() {
    //     this.setState({ answer: this.props.answer,index:this.props.index})
    // }

    toParent(funName,index,type,refsCon) {
        let data = {funName,index,type,refsCon}
        this.props.callbackFromChild(data)
    }
    toAddSlotForSelect(data) {
        this.props.toAddSlotForSelect(data);
    }
    toEditSlotByUnSelect(data) {
        this.props.toEditSlotByUnSelect(data);
    }
    toOnEditQa(data) {
        if(data.type === "save") {
            data.refsCon = this.refs[`content${data.index}`]
        }
        this.props.toOnEditQa(data);
    }
    render() {
        const { slotDetailArr,answer,index } = this.props;
        return (
            <div className={styles.answerWarp}>
                {answer.isDefault ? (
                    <Row>
                        <Col span={5}>{index === 0 ? ' ' : ' 其它情况默认答案'}</Col>
                        <Col span={6} offset={13}>
                            <Button
                                htmlType="button"
                                style={{ marginLeft: 7 }}
                                onClick={() => this.toParent("onEditQa",index,'cancel')}
                            >取消</Button>
                            <Button
                                htmlType="button"
                                type="primary"
                                style={{ marginLeft: 10, float: 'right' }}
                                onClick={() => this.toParent("onEditQa",index,'save',this.refs[`content${index}`])}
                            > 完成</Button>
                        </Col>
                    </Row>
                ) : (
                    <AnswerSlot
                        answer={answer}
                        index={index}
                        slotDetailArr={slotDetailArr}
                        toAddSlotForSelect={this.toAddSlotForSelect.bind(this)}
                        toEditSlotByUnSelect={this.toEditSlotByUnSelect.bind(this)}
                        toOnEditQa={this.toOnEditQa.bind(this)}
                    ></AnswerSlot>
                )}
                <Row>
                    <Tabs
                        type="card"
                        defaultActiveKey={answer.answerType}
                        onChange={key => this.toParent("callback",key,index)}
                        style={{ marginTop: 10 }}
                    >
                        <TabPane tab="富文本" key="richText">
                            <div style={{ width: 650 }}>
                                <Editor
                                    content={answer.content}
                                    name={`content${index}`}
                                    id={`content${index}`}
                                    ref={`content${index}`}
                                />
                            </div>
                        </TabPane>
                        <TabPane tab="文本" key="text">
                            <TextArea
                                rows={6}
                                onChange={e => this.toParent("getTextValue",e,index) }
                                defaultValue={answer.content}
                            />
                        </TabPane>
                    </Tabs>
                </Row>
            </div>
        )
    }
}

export default AnswerEdit
